Reset Password User Experience Specification

Release: scanR 4.5

August 1, 2008

Author: Pabini Gabriel-Petit, VP, User Experience

Copyright © 2007 scanR Inc. All rights reserved.

Revision History

Note—Colored text in the specifications indicates revisions to the text.

1.0  Overview

This specification defines the user experience for resetting a password, which comprises the following:

• changes to the Sign In to scanR page
• a new Request Assistance page, with confirmation and error messages
• email, SMS, and mobile application alert messages
• a new Reset Your Password pages for the PC and mobile Web sites and a confirmation message

2.0  Definitions of Terms

available

(Adj.) Describes a button or option that does not appear dimmed. When a button or option appears available, the functionality is available, and a user can click or select it.

dimmed

(Adj.) Describes an unavailable feature or button that has a grayed out appearance. When a button or option appears dimmed, a user cannot click or select it.

variable

Within the specification, variable text appears within brackets. For example, the text Remove [a photo/[#] photos]… represents the variable strings Remove a photo and Remove [#] photos, and the variable [#] represents a number of photos.

3.0  Reset Password User Experience  Revised

The user experience for resetting a password comprises the following:

• changes to the Sign In to scanR page
• a new Request Assistance page, with confirmation and error messages
• email, SMS, and mobile application alert messages
• a new Reset Your Password pages for the PC and mobile Web sites and a confirmation message

3.1  Sign In to scanR Page  Revised

The following changes apply to the Sign In to scanR page on both the PC Web and mobile Web sites:

• Revise the page title as follows: Sign In to scanR. (Note case.)
• Revise the Need assistance? group on the Sign In to scanR page as follows:

Need assistance?

Having trouble signing in or resetting your password?
For immediate, automated assistance, Request
Assistance.

Or contact scanR Support at [email protected].

Note—This is only an approximation of the layout for this user interface. Use the same layout conventions and styles as those for similar elements in the figures that follow. There may be some color shifting in the figures, because I based them on the HTML/CSS implementation and the screen shot used a different color profile, which I didn't notice until it was too late to do anything about it. Follow the color guidelines in scanR Color Palette or use existing styles, as appropriate.

The Sign In to scanR page includes the following interactive element:

• Request Assistance link—If a user clicks Request Assistance, the Request Assistance page appears.

On the PC Web version of this page, since the user is not signed in, the header linkbar contains the links that appear when a user is not signed in.

3.2  Request Assistance Page  Revised

If a user clicks Request Assistance on the Sign in to scanR page, the Request Assistance page appears. Versions of this page for both the PC Web, shown in Figure 3-1, and the mobile Web include the following elements:

• Page title: Request Assistance
• Instructional text: Provide your user name or email address, and scanR will send you a message to help you sign in or reset your password.
• User name or email address: text box—To reset his password, a user can type either his user name or email address in this box.
• Send Message button—By default, the Send Message button appears dimmed. Once the user fills out the form—that is, types a value in the User name or email address: text box comprising at least two characters—the Send Message button becomes available. Once the user clicks Send Message:
  • If the user name or email address the user has provided matches a user’s scanR account information, scanR sends one or more messages to the user, as follows:
    • If a user provides a user name, scanR sends messages via email and/or SMS to all devices that are associated with the user’s account.
    • If a user provides an email address that matches a single user account, scanR sends messages via email and/or SMS to all devices that are associated with the user account matching that email address.
    • If a user provides an email address that matches both an account’s user name and a single other account’s email address, scanR sends messages via email and/or SMS to all devices that are associated with both user accounts.
    • If a user provides an email address that matches the email addresses for multiple accounts, scanR sends no messages to the user.
    • If a user provides a user name for an account for which we have no email or SMS address, scanR sends no messages to the user.
  • Once the message is sent, remove the Request Assistance form, using a fade out transition, then fade in the Message sent! confirmation message.
• Cancel button—If the user clicks Cancel, the Sign In to scanR page appears.

Note—See Chris Dury’s User Information Matrix for detailed messaging requirements.

On the PC Web version of this page, since the user is not signed in, the header linkbar contains the links that appear when a user is not signed in.

On the mobile Web version of this page, Cancel is a link, not a button.

Figure 3-1—Request Assistance page  Revised

3.2.1   Message Sent Confirmation Message

Once the message is sent, fade out the Request Assistance form, then fade in the Message sent! confirmation message. Versions of this page for both the PC Web, shown in Figure 3-2, and the mobile Web include the following elements:

Request Assistance

Message sent!

scanR has sent a message to the email and SMS addresses for your account.

Click the link in the message within 5 days to reset your password.

OK button—If the user clicks OK, the home page appears.

On the PC Web version of this page, since the user is not signed in, the header linkbar contains the links that appear when a user is not signed in.

Figure 3-2—Message sent! confirmation message  Revised

3.2.2   No Account Matches Error Message  Revised

If the user name or email address the user provided does not match any scanR account, fade in the No account matches. error message instead. Versions of this page for both the PC Web, shown in Figure 3-3, and the mobile Web include the following elements:

Request Assistance

No account matches.

The user name or email address you provided doesn’t match any scanR account. Please try again or contact Support. If you haven’t yet uploaded any photos to scanR, try signing up again.

Figure 3-3 shows the variant of this message that appears when a user has provided a user name that does not match any scanR account.

The No account matches. error message page includes the following interactive elements:

• Try Again button—If a user clicks Try Again, the Request Assistance page appears.
• support@scanR.com—A user can click this link to send an email message to scanR.

On the PC Web version of this page, since the user is not signed in, the header linkbar contains the links that appear when a user is not signed in.

Figure 3-3—No account matches. error message  Revised

3.2.3   Multiple Accounts Match Error Message  Revised

If the user name or email address the user provided matches multiple scanR accounts, fade in the Multiple accounts match. error message. Versions of this page for both the PC Web, shown in Figure 3-4, and the mobile Web include the following elements:

Request Assistance

Multiple accounts match.

The email address you provided matches multiple scanR accounts. Please try again with your user name or contact Support for assistance.

The Multiple accounts match. error message page includes the following interactive elements:

• Try Again button—If a user clicks Try Again, the Request Assistance page appears.
• [email protected]—A user can click this link to send an email message to scanR.

On the PC Web version of this page, since the user is not signed in, the header linkbar contains the links that appear when a user is not signed in.

Figure 3-4—Multiple accounts match. error message

3.2.4   No Email or SMS Address Error Message  Revised

If a user provides a user name for an account for which we have no email or SMS address, fade in the No email or SMS address. error message. Versions of this page for both the PC Web, shown in Figure 3-5, and the mobile Web include the following elements:

Request Assistance

No email or SMS address.

scanR does not have an email or SMS address for your account. Please contact Support.

The No email or SMS address. error message page includes the following interactive elements:

• OK button—If a user clicks OK, the Sign In to scanR page appears.
• [email protected]—A user can click this link to send an email message to scanR.

On the PC Web version of this page, since the user is not signed in, the header linkbar contains the links that appear when a user is not signed in.

Figure 3-5—No email or SMS address. error message  Revised

3.2.5   Password Reset Expired Alert Message

If a user clicks a link in a Reset Your scanR Password message after five days and it has expired, display the Password reset expired. alert message. Versions of this page for both the PC Web, shown in Figure 3-6, and the mobile Web include the following elements:

Request Assistance

Password reset expired.

Your password reset has expired. Your password remains unchanged. Please try again.

The Password reset expired. alert message page includes the following interactive element:

Try Again button—If a user clicks Try Again, the Request Assistance page appears.

On the PC Web version of this page, since the user is not signed in, the header linkbar contains the links that appear when a user is not signed in.

Figure 3-6—Password reset expired. alert message  New

3.2.6   Mobile Error Messages

On the Request Assistance page in a mobile Web browser, if the user clicks Send Message without typing either a user name or an email address, the following error message appears:

• Page title: Identify Yourself
• Message text: You must provide either your user name or email address. (Note: Email address is not hyphenated.)
• Button: [Try Again]—Clicking the Try Again button returns the user to the Request Assistance page.

If the user types a user name or email address that comprises fewer than two characters, then clicks Send Message, the following error message appears:

• Page title: Invalid Identity
• Message text: The user name or email address you typed is not valid.
• Button: [Try Again]—Clicking the Try Again button returns the user to the Request Assistance page.

3.3  Messages  Revised

Once a user clicks Send Message on the Request Assistance page, scanR sends messages via email and/or SMS, as appropriate.

3.3.1   Email Message  Revised

When sending a message to a user’s email address, the message has the following subject:

Reset Your scanR Password

Note—In scanR 4.5, email messages will be plain text messages, so in the following message, neither the scanR logo nor the blue header, Reset Your scanR Password, will appear in the message. Nor will the following text:

If you are unable to click the link, please paste this Web address into your browser:
[URL]

Once we transition to HTML messages, add the logo, the header, the above text, and the URL to the message.

Send the following message to a user’s email address:

[scanR Logo]

Reset Your scanR Password

Dear [First Name]

Your scanR user name is [User Name]. To reset your password, please click this secure link within 5 days:

[Link]

If you are unable to click the link, please paste this Web address into your browser:
[URL]

Then, on the Reset Your Password page that appears in your browser, provide your new password.

If you don’t need to reset your password after all, just do nothing. Your password will remain unchanged.

Thank you for using scanR!

The scanR Team

http://www.scanR.com/

Note—If a user’s first name is unknown, in the message, replace Dear [First Name] with Dear [User Name].

If the user clicks a link in an email message, display the Reset Your Password page in the user’s PC Web browser.

3.3.2   SMS or Mobile Email Message  Revised

When sending a message to a user’s SMS address or mobile email address, the message has the following subject:

scanR

Send the following message to a user’s SMS address or mobile email address:

To reset your password:

1) Click link within 5 days: [Link]

2) Set new password.

If the user clicks a link in an SMS or mobile email message, display the Reset Your Password page in the user’s mobile Web browser.

3.4  Reset Your Password Page

If a user clicks a link in an email or SMS message or the Reset Password button in a mobile application alert message, the Reset Your Password page appears in either the PC or mobile Web browser, as described in the following sections.

3.4.1   Reset Your Password Page for the PC Web Application  Revised

If a user clicks a link in an email message, the Reset Your Password page appears in the user’s PC Web browser, as shown in Figure 3-7. This page includes the following elements:

• Page title: Reset Your Password
• New password: text box:
  • By default, this field has the input focus, an insertion point appears in the box, an alert icon appears to the right of the box, and the user assistance text At least 6 characters. appears to the right of the label.
  • If a user presses Tab or clicks another field without typing a password, an error icon appears to the right of the box and the error message Type your password. appears to the right of the label. The error icon and message remain until the user provides a password.
  • If the user types fewer than 6 characters, then presses Tab or clicks another field, an error icon appears to the right of the box and the error message At least 6 characters. appears to the right of the label.
  • The new password can be the same as the user’s old password.
  • This field is case sensitive.
  • Once the user types a valid password—that is, a password comprising six or more characters—a verification check mark appears to the right of the New password text box.
  • If the user types a valid password, then presses Tab or clicks another field, the verification check mark remains to the right of the New password text box.
• Confirm password: text box:
  • If a user moves the input focus to the Confirm password text box, an alert icon appears to the right of the box and the user assistance text Type the same password. appears to the right of the label.
  • If the user selects an insertion point in the box, then presses Tab or clicks another field without typing a password, an error icon appears to the right of the box and the error message Confirm your password. appears to the right of the label. The error icon and message remain until the user confirms his password.
  • If the user types fewer than 6 characters in the New password box, then, without providing a valid password, tabs to or clicks the Confirm password box, and types fewer than 6 characters, then presses Tab or clicks another field, an error icon appears to the right of the box and the error message At least 6 characters. appears to the right of the label.
  • The user must type the same password in this box. As a user types, if the user types a character that does not match the password the user typed in the New password text box, an error icon appears to the right of the box and the error message Passwords do not match. appears to the right of the label.
  • If the user types a password that does not match the password the user typed in the New password text box, then presses Tab or clicks another field, the error icon remains to the right of the box and the error message Passwords do not match. remains to the right of the label.
  • This field is case sensitive.
  • Once the user types a password that matches the password the user typed in the New password text box, a verification check mark appears to the right of the Confirm password text box.
  • If the user types a password that matches the password the user typed in the New password text box, then presses Tab or clicks another field, the verification check mark remains to the right of the Confirm password text box.
• Reset button—By default, the Reset button appears dimmed. Once the user fills out both fields in the form, the password is valid, and the two passwords match, the Reset button becomes available. Clicking Reset resets the user’s password to the new password and, if the password reset is successful, signs the user in to scanR.
• Cancel button—If a user clicks Cancel, the user’s password is not reset and the Sign In to scanR page appears.

On the PC Web version of this page, since the user is now signed in, the Welcome [Given name] message appears in the header, and the header linkbar contains the links that appear when a user is signed in, but in a process funnel.

On the mobile Web version of this page, Cancel is a link, not a button.

Figure 3-7—PC Web Reset Your Password page  Revised

3.4.2   Reset Your Password Page for the Mobile Web Application  Revised

If a user clicks a link in an SMS or mobile email message or the Reset Password button in a mobile application alert message, the Reset Your Password page appears in the user’s mobile Web browser. This page includes the following elements:

• Page title: Reset Your Password
• New password: text box:
  • By default, this field has the input focus.
  • An alert icon appears to the right of the box, and the user assistance text At least 6 characters. appears beneath the box.
  • The new password can be the same as the user’s old password.
  • This field is case sensitive.
• Confirm password: text box:
  • An alert icon appears to the right of the box, and the user assistance text Required appears beneath the box.
  • The user must type the same password in this box.
  • This field is case sensitive.
• Reset button—Clicking Reset resets the user’s password to the new password and, if the password reset is successful, signs the user in to scanR.
• Cancel button—If a user clicks Cancel, the user’s password is not reset and the Sign In to scanR page appears.

If the user provides a password that is fewer than 6 characters, then clicks Reset, the following error message appears:

• Page title: Invalid Password
• Message text: Your password must be at least 6 characters.
• Button: [Try Again]—Clicking the Try Again button returns the user to the Reset Your Password page.

If the user types passwords that do not match, then clicks Reset, the following error message appears:

• Page title: Passwords Don't Match
• Message text: The passwords you typed do not match.
• Button: [Try Again]—Clicking the Try Again button returns the user to the Reset Your Password page.

3.4.3   Password Reset Successful Confirmation Message  Revised

Once the user clicks Reset on the Reset Your Password page, if the password reset is successful, fade out the Reset Your Password form, then fade in the Password reset successful! confirmation message. Versions of this page for both the PC Web, shown in Figure 3-8, and the mobile Web include the following elements:

Reset Your Password

Password reset successful!

You have successfully reset the password for your scanR account and are signed in to scanR.

OK button—If the user clicks OK, the My Scans page appears.

On the PC Web version of this page, since the user is now signed in, the Welcome [Given name] message appears in the header, and the header linkbar contains the links that appear when a user is signed in.

Figure 3-8—Password reset successful! confirmation message  Revised

The Password reset successful! confirmation message page for the mobile Web also includes the following link above the copyright information:

0  Home

3.4.4   Password Reset Failed Error Message  Revised

Once the user clicks Reset on the Reset Your Password page, if the password reset fails, fade out the Reset Your Password form, then fade in the Password reset failed. error message. Versions of this page for both the PC Web, shown in Figure 3-9, and the mobile Web include the following elements:

Reset Your Password

Password reset failed.

Your password reset was unsuccessful. Please try again or contact Support.

The Password reset failed. error message page includes the following interactive elements:

• Try Again button—If a user clicks Try Again, the Reset Your Password page appears.
• support@scanR.com—A user can click this link to send an email message to scanR.

On the PC Web version of this page, since the user is now signed in, the Welcome [Given name] message appears in the header, and the header linkbar contains the links that appear when a user is signed in, but in a process funnel.

Figure 3-9—Password reset failed. error message  Revised

3.4.5   Unable to Reset Password Error Message

If a user provides an invalid reset password link, display the Unable to reset password. error message. Versions of this page for both the PC Web, shown in Figure 3-10, and the mobile Web include the following elements:

Reset Your Password

Unable to reset password.

The Web address you provided is not a valid reset password link. Please verify that you provided the correct address, try again, or contact Support for assistance.

The Unable to reset password. error message page includes the following interactive elements:

• Try Again button—If a user clicks Try Again, the Request Assistance page appears.
• [email protected]—A user can click this link to send an email message to scanR.

On the PC Web version of this page, since the user is not signed in, the header linkbar contains the links that appear when a user is not signed in.

Figure 3-10—Unable to reset password. error message  New

3.5  Page Dimensions

Figures 3-11–3-14 show the page dimensions for the Request Assistance and Reset Password pages and their messages.

Figure 3-11—Request Assistance page dimensions  New

Figure 3-12—Confirmation page dimensions  New

Figure 3-13—Error message page dimensions  New

Figure 3-14—Reset Password page dimensions  New